<template>
  <div class="page-container">
    <div class="grid-container">
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="10" :order="1" class="tool-action">
          <a-input-search placeholder="订单号" v-model="params.orderNo" @search="onSearch" style="width:400px;">
            <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
          </a-input-search>
        </a-col>
        <a-col :span="14" :order="2" class="tool-pagination">
        </a-col>
      </a-row>
      <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
          <template slot="payAmount" slot-scope="payAmount">
            {{fmMoney(payAmount,2)}}
          </template>
          <template slot="goodsAmount" slot-scope="goodsAmount">
            {{fmMoney(goodsAmount,2)}}
          </template>

          <template slot="createAt" slot-scope="createAt">
              {{moment(createAt).format('YYYY-MM-DD hh:mm:ss')}}
          </template>
          <template slot="operation" slot-scope="text,record">
              <a @click="onRefund(record)">退单</a>
              <a-divider type="vertical"/>
              <a @click="onDispatch(record)"><a-icon type="solution" />派单</a>
          </template>
        <a-table style="padding-left: 7px;" slot="expandedRowRender" slot-scope="record" :columns="innerColumns" :dataSource="record.orderItem"  :rowKey="item => item.id" :pagination="false" :showHeader="false">
            <template slot="name" slot-scope="text,record">
                {{record.name}}({{record.spec}})
            </template>
            <template slot="item" slot-scope="record" >--</template>
        </a-table>
      </a-table>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action"></a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
          <a-pagination :total="total" v-if="total>params.pageSize" @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
        </a-col>
      </a-row>
    </div>
    <a-modal title="骑手派单" v-model="dialogVisible" :footer="null" :maskClosable="false" @cancel="dialogVisible = false" width="800px" >
      <select-rider v-if="dialogVisible" @select="handleOk"></select-rider>
    </a-modal>
  </div>
</template>
<script>
  import {findList,dispatchOrder,refundOrder} from "../../api/order";
  import {fmMoney} from "../../utils/index";
  import SelectRider from './components/SelectRider'
  import moment from 'moment'
  const columns = [
      { title: '订单号', dataIndex: 'orderNo', key: 'orderNo',align:'center',width:180 },
      { title: '消费时间', dataIndex: 'createAt', key: 'createAt' ,align:'center',scopedSlots: { customRender: 'createAt' } ,width:180},
      { title: '商品数量', dataIndex: 'count', key: 'count' ,align:'right',width:180 },
      { title: '商品金额', dataIndex: 'goodsAmount', key: 'goodsAmount' ,align:'right',scopedSlots: { customRender: 'goodsAmount' },width:180},
      { title: '实收金额', dataIndex: 'payAmount', key: 'payAmount' ,align:'right',scopedSlots: { customRender: 'payAmount' },width:180},
      { title: '操作', dataIndex: 'operation', key: 'operation' ,align:'center',scopedSlots: { customRender: 'operation' }},
  ];
  const innerColumns = [
      { title: 'name', dataIndex: 'name', key: 'name',align:'right',width:360,scopedSlots: { customRender: 'name' }},
      { title: 'num', dataIndex: 'num', key: 'num',align:'right' ,width:180},
      { title: 'price', dataIndex: 'price', key: 'price' ,align:'right',width:180},
      { title: 'amount', dataIndex: 'amount', key: 'amount',align:'right',width:180},
      {title:'',align:'center',scopedSlots: { customRender: 'item' }},];
  export default {
    components:{SelectRider},
    data() {
        return {
            dataList: [],
            detailList:[],
            creates:[],
            params:{
                orderNo:'',
                status:'PAID',
                begin:'',
                end:'',
                current:1,
                pageSize:10,
            },
            columns,
            innerColumns,
            total:0,
            order:null,
          dialogVisible:false,
            loading:false
        }
    },
    methods:{
      moment,
      fmMoney,
      onSearch(){
          this.params.current = 1;
          this.onLoad();
      },
      onChange(current){
          this.params.current = current;
          this.onLoad();
      },
      async handleOk(result){
          if(result != null){
           let resp = await dispatchOrder({orderNo:this.order.orderNo,riderId:result.id})
            if(this.qUtil.validResp(resp)){
              this.$message.success("订单 [ "+this.order.orderNo+" ] 已派遣给骑手 [ "+result.name+" ]")
              this.dialogVisible = false;
            }else{
              this.$message.error(resp.errMsg|| "派单失败")
            }
          }
      },
      onRefund(row){
        const that = this
        this.loading = true;
        this.$confirm({
          title: '确认退单吗?',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.handleRefund(row.id);
          }, onCancel() {
            this.loading = false;}
        })
      },
      async handleRefund(row){
        let resp = await refundOrder(row.id);
        this.loading = false;
        if(this.qUtil.validResp(resp)){
          this.$message.success("订单 [ "+row.orderNo+" ] 退单操作成功")
          this.onLoad()
        }else{
          this.$message.error(resp.errMsg|| '操作失败')
        }
      },
      onDispatch(row){
        console.log("=====>",row)
        this.dialogVisible = true;
        this.order = row;
      },
      async onLoad(){
        this.loading = true;
        let resp = await findList(this.params);
          console.log("===resp==",resp);
        this.loading = false;
        if(!this.qUtil.validResp(resp)) return false;
        this.total = resp.data.total;
        this.dataList = resp.data.orderList;
        console.log("dataList",this.dataList);
      }
    },
    mounted(){
        this.onLoad();
    },
  }
</script>

